<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>批改界面 - 智能教育系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            margin: 0;
            padding-top: 80px;
        }

        .grade-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 2rem;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .grade-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .grade-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(110, 142, 251, 0.1), transparent);
            transform: translateX(-100%);
            transition: transform 0.5s ease;
        }

        .grade-card:hover::before {
            transform: translateX(100%);
        }

        .grade-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            border: none;
            font-weight: 600;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
            transform: translateX(-100%);
            transition: transform 0.5s ease;
        }

        .btn-primary:hover::before {
            transform: translateX(100%);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(110, 142, 251, 0.3);
        }

        .alert {
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            animation: slideIn 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .alert::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
            transform: translateX(-100%);
            transition: transform 0.5s ease;
        }

        .alert:hover::before {
            transform: translateX(100%);
        }

        @keyframes slideIn {
            from {
                transform: translateY(-10px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .form-group {
            margin-bottom: 1.5rem;
            position: relative;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            color: #4a5568;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .form-control {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            transition: all 0.3s ease;
            background: #f8fafc;
        }

        .form-control:focus {
            outline: none;
            border-color: #6e8efb;
            box-shadow: 0 0 0 3px rgba(110, 142, 251, 0.1);
            background: white;
        }

        .form-control:hover {
            border-color: #cbd5e0;
        }

        .image-preview {
            width: 100%;
            height: 300px;
            border: 2px dashed #cbd5e0;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8fafc;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .image-preview:hover {
            border-color: #6e8efb;
            background: #f1f5f9;
        }

        .image-preview img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: all 0.3s ease;
        }

        .image-preview:hover img {
            transform: scale(1.02);
        }

        .upload-icon {
            font-size: 3rem;
            color: #cbd5e0;
            transition: all 0.3s ease;
        }

        .image-preview:hover .upload-icon {
            color: #6e8efb;
            transform: scale(1.1);
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .loading-overlay.active {
            display: flex;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #6e8efb;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .exam-select {
            position: relative;
        }

        .exam-select select {
            appearance: none;
            padding-right: 2.5rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234a5568'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 1.5rem;
        }

        .exam-select::after {
            content: '';
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #4a5568;
            pointer-events: none;
        }

        .progress-container {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            margin: 2rem 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .progress-bar {
            width: 100%;
            height: 20px;
            background: #e2e8f0;
            border-radius: 10px;
            overflow: hidden;
            margin: 1rem 0;
        }

        .progress-fill {
            width: 0%;
            height: 100%;
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            transition: width 0.3s ease;
            animation: progress 2s ease-in-out infinite;
        }

        .progress-text {
            color: #4a5568;
            font-size: 1.1rem;
            margin-top: 1rem;
        }

        @keyframes progress {
            0% { width: 0%; }
            50% { width: 70%; }
            100% { width: 100%; }
        }
    </style>
</head>
<body>
    <!-- 引入导航栏 -->
    <div th:replace="~{fragments/navbar :: navbar}"></div>

    <!-- 加载动画 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner"></div>
    </div>

    <div class="grade-container">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-3xl font-bold text-gray-800">批改界面</h1>
        </div>

        <!-- 提示消息 -->
        <div th:if="${success}" class="alert bg-green-100 text-green-700" th:text="${success}"></div>
        <div th:if="${error}" class="alert bg-red-100 text-red-700" th:text="${error}"></div>

        <div class="grade-card p-6">
            <form th:action="@{/exam/grade}" method="post" enctype="multipart/form-data" id="gradeForm">
                <div class="form-group">
                    <label class="form-label">选择考试</label>
                    <div class="exam-select">
                        <select name="examId" class="form-control" required>
                            <option value="">-- 选择考试 --</option>
                            <option th:each="exam : ${exams}"
                                    th:value="${exam.id}"
                                    th:text="${exam.examName + ' (' + exam.subject + ')'}">
                            </option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">学生姓名</label>
                    <input type="text" name="studentName" class="form-control" required
                           placeholder="请输入学生姓名">
                </div>

                <div class="form-group">
                    <label class="form-label">上传试卷图片</label>
                    <div class="image-preview" id="imagePreview">
                        <div class="upload-icon">📷</div>
                    </div>
                    <input type="file" name="examImage" accept="image/*" id="imageInput" required style="display: none;">
                    <div class="text-sm text-gray-500 mt-1">点击上方区域选择图片</div>
                </div>

                <div class="form-group">
                    <label class="form-label">答案要求（可选）</label>
                    <textarea name="answerRequirements" class="form-control" rows="4" 
                              placeholder="请输入答案要求，例如：需要写出计算过程、注意单位等"></textarea>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn-primary w-full" id="submitBtn">开始批改</button>
                </div>
            </form>
        </div>

        <!-- 批改进度 -->
        <div id="gradingProgress" class="hidden">
            <div class="progress-container">
                <div class="progress-bar">
                    <div class="progress-fill"></div>
                </div>
                <p class="progress-text">AI正在批改试卷，请稍候...</p>
            </div>
        </div>
    </div>

    <script>
        console.log('页面加载完成，开始初始化...');

        // 添加表单控件动画效果
        document.querySelectorAll('.form-control').forEach(control => {
            control.addEventListener('focus', function() {
                this.parentElement.querySelector('.form-label').style.color = '#6e8efb';
            });

            control.addEventListener('blur', function() {
                this.parentElement.querySelector('.form-label').style.color = '#4a5568';
            });
        });

        // 添加图片预览功能
        const imagePreview = document.getElementById('imagePreview');
        const imageInput = document.getElementById('imageInput');
        const gradeForm = document.getElementById('gradeForm');
        const submitBtn = document.getElementById('submitBtn');
        const loadingOverlay = document.getElementById('loadingOverlay');

        console.log('DOM元素:', {
            imagePreview: imagePreview,
            imageInput: imageInput,
            gradeForm: gradeForm,
            submitBtn: submitBtn,
            loadingOverlay: loadingOverlay
        });

        // 图片预览点击事件
        imagePreview.addEventListener('click', () => {
            console.log('点击图片预览区域');
            imageInput.click();
        });

        // 图片选择事件
        imageInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                console.log('选择的文件:', file.name, file.type, file.size);
                const reader = new FileReader();
                reader.onload = (e) => {
                    imagePreview.innerHTML = `
                        <img src="${e.target.result}" alt="预览图片" style="max-width: 100%; max-height: 300px;">
                    `;
                };
                reader.readAsDataURL(file);
            }
        });

        // 表单提交事件
        if (gradeForm) {
            console.log('绑定表单提交事件');
            gradeForm.addEventListener('submit', async function(e) {
                console.log('表单提交事件触发');
                e.preventDefault();
                
                // 获取所有表单元素
                const examSelect = document.querySelector('select[name="examId"]');
                const studentNameInput = document.querySelector('input[name="studentName"]');
                const examImageInput = document.getElementById('imageInput');
                const answerRequirementsInput = document.querySelector('textarea[name="answerRequirements"]');

                console.log('表单元素:', {
                    examSelect: examSelect ? '存在' : '不存在',
                    studentNameInput: studentNameInput ? '存在' : '不存在',
                    examImageInput: examImageInput ? '存在' : '不存在',
                    answerRequirementsInput: answerRequirementsInput ? '存在' : '不存在'
                });

                // 获取表单值
                const examId = examSelect ? examSelect.value : '';
                const studentName = studentNameInput ? studentNameInput.value : '';
                const examImage = examImageInput && examImageInput.files.length > 0 ? examImageInput.files[0] : null;
                const answerRequirements = answerRequirementsInput ? answerRequirementsInput.value : '';

                console.log('表单数据:', {
                    examId: examId,
                    studentName: studentName,
                    examImage: examImage ? {
                        name: examImage.name,
                        type: examImage.type,
                        size: examImage.size
                    } : '未选择',
                    answerRequirements: answerRequirements
                });

                if (!examId) {
                    alert('请选择考试');
                    return;
                }

                if (!studentName) {
                    alert('请输入学生姓名');
                    return;
                }

                if (!examImage) {
                    alert('请上传试卷图片');
                    return;
                }

                // 显示加载动画
                if (loadingOverlay) {
                    console.log('显示加载动画');
                    loadingOverlay.classList.add('active');
                }
                
                // 禁用提交按钮
                if (submitBtn) {
                    console.log('禁用提交按钮');
                    submitBtn.disabled = true;
                    submitBtn.textContent = '正在提交...';
                }

                try {
                    console.log('开始构建FormData');
                    const formData = new FormData();
                    formData.append('examId', examId);
                    formData.append('studentName', studentName);
                    formData.append('examImage', examImage);
                    if (answerRequirements) {
                        formData.append('answerRequirements', answerRequirements);
                    }

                    // 打印FormData内容
                    for (let pair of formData.entries()) {
                        console.log(pair[0] + ': ' + (pair[1] instanceof File ? pair[1].name : pair[1]));
                    }

                    console.log('开始发送请求');
                    const response = await fetch('/exam/grade', {
                        method: 'POST',
                        body: formData
                    });

                    console.log('收到响应:', response.status, response.statusText);
                    if (response.redirected) {
                        console.log('重定向到:', response.url);
                        window.location.href = response.url;
                    } else {
                        const result = await response.text();
                        console.error('提交失败:', result);
                        alert('提交失败：' + result);
                    }
                } catch (error) {
                    console.error('提交出错:', error);
                    alert('提交失败：' + error.message);
                } finally {
                    console.log('清理状态');
                    // 隐藏加载动画
                    if (loadingOverlay) {
                        loadingOverlay.classList.remove('active');
                    }
                    
                    // 恢复提交按钮
                    if (submitBtn) {
                        submitBtn.disabled = false;
                        submitBtn.textContent = '开始批改';
                    }
                }
            });
        } else {
            console.error('未找到表单元素');
        }

        // 添加页面滚动效果
        window.addEventListener('scroll', function() {
            const gradeCard = document.querySelector('.grade-card');
            const scrollPosition = window.scrollY;
            
            if (scrollPosition > 100) {
                gradeCard.style.transform = 'translateY(-5px)';
            } else {
                gradeCard.style.transform = 'translateY(0)';
            }
        });

        // 显示批改进度
        function showGradingProgress() {
            document.getElementById('gradingProgress').classList.remove('hidden');
        }

        // 隐藏批改进度
        function hideGradingProgress() {
            document.getElementById('gradingProgress').classList.add('hidden');
        }

        // 提交试卷时显示进度
        document.querySelector('form').addEventListener('submit', function(e) {
            showGradingProgress();
        });
    </script>
</body>
</html> 